<template>
	<view class="page flex_c">

		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);" v-if="no_nav != 1">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="nav_box" v-if="no_nav != 1"></view>

		<view class="box">
			<view class="title">超圈建圈协议</view>

			<view class="item flex_center" @click="is_agree1 = !is_agree1">
				<image :src="`/static/public/select${is_agree1 ? '_s' : ''}.png`" mode="aspectFill"></image>
				<view class="text flex_center">
					<text>我已阅读</text>
					<text style="color: #FD2A53;" @click.stop="toUrl('use_purchase_protocol')">《超圈程序使用权购买协议》</text>
				</view>
			</view>

			<view class="item flex_center" @click="is_agree2 = !is_agree2">
				<image :src="`/static/public/select${is_agree2 ? '_s' : ''}.png`" mode="aspectFill"></image>
				<view class="text flex_center">
					<text>我已阅读</text>
					<text style="color: #FD2A53;" @click.stop="toUrl('agency_fund_protocol')">《超圈代收款服务协议》</text>
				</view>
			</view>

			<view class="item flex_center" @click="is_agree3 = !is_agree3">
				<image :src="`/static/public/select${is_agree3 ? '_s' : ''}.png`" mode="aspectFill"></image>
				<view class="text flex_center">
					<text>我已阅读</text>
					<text style="color: #FD2A53;" @click.stop="toUrl('circle_manage_book')">《圈子管理手册》</text>
				</view>
			</view>
		</view>

		<button @click="onSubmit">确认创建</button>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal flex_c">
				<!-- <view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view> -->
				<view class="title">提示</view>
				<view class="text">{{ msg }}</view>
				<view class="modal_btn flex_r_around">
					<view class="item submit flex_r_around" @click="onModal">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				no_nav: 0,

				create_circle_id: 0,

				info: {

				},

				is_agree1: false,
				is_agree2: false,
				is_agree3: false,

				show: false,
				msg: '',
				code: 0,
			}
		},
		methods: {
			
			getToken(map) {
				console.log('ios返回', map);
				var data = JSON.parse(map);
				uni.setStorageSync('token', data.token);
				uni.setStorageSync('cid', data.cid);
				uni.setStorageSync('terminal', data.terminal);
				this.onSubmit();
			},
			
			onSubmit() {
				
				if(!uni.getStorageSync('token')){
					this.$native.getToken();
					return;
				}

				if (!this.is_agree1) {
					return this.$util.msg('请先阅读并同意《超圈程序使用权购买协议》');
				}

				if (!this.is_agree2) {
					return this.$util.msg('请先阅读并同意《超圈代收款服务协议》');
				}

				if (!this.is_agree3) {
					return this.$util.msg('请先阅读并同意《圈子管理手册》');
				}


				if (!this.info.circle_id || this.info.circle_id == '0') {
					this.$post('/circle.circle/createCircle', this.info, false, (res) => {
						this.code = res.code;
						if (res.code == 5) {
							// 成功
							this.create_circle_id = res.data.circle_id;
							this.msg = res.msg;
							this.show = true;
						} else {
							this.$util.msg(res.msg);
						}
					}).then(res => {
						this.code = res.code;
						this.msg = res.msg;
						this.show = true;
						this.create_circle_id = res.data.circle_id;
						this.$native.createCircleSuccess(`${this.create_circle_id}`);
					});
				} else {
					this.$post('/circle.circle/submitCircleManage', this.info).then(res => {
						this.code = res.code;
						this.create_circle_id = res.data.circle_id;
						this.msg = res.msg;
						this.$util.msg(res.msg);
						this.$native.createCircleSuccess(`${this.create_circle_id}`);
					});
				}
			},

			toUrl(type) {
				this.$native.toNewPage(type);
			},

			onModal() {
				if (this.code == 1) {
					// this.$native.backAction();
					this.$util.toUrl(`/pages/circle/upgrade?circle_id=${this.create_circle_id}`);
					// this.$native.toUpgradePage(this.create_circle_id);
				} else {
					this.show = false;
				}
			},

		},

		onLoad(option) {
			this.no_nav = option.no_nav;
			this.info = JSON.parse(option.info);
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 60rpx 0 30rpx;
	}

	.title {
		font-weight: 600;
		font-size: 48rpx;
		color: #131313;
		line-height: 66rpx;
		margin-bottom: 32rpx;
		text-align: center;
	}

	.item {
		padding: 32rpx 48rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 32rpx;
		}

		text {
			font-weight: 400;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}
	}

	button {
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		position: fixed;
		bottom: 30rpx;
		z-index: 99;
		left: 50%;
		transform: translateX(-50%);
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 68rpx 48rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}
</style>